<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@include file="../header.jsp" %>
<head>
	 <style>
	 
		  
		
		<!--begin分类样式-->
		@charset "utf-8";
	.brandNameQ {
	height:90px;
	background:#fff;
	position:relative;
	margin-bottom:10px;
	overflow:hidden;
}
   

.catSelector li a{
	font-size:12px;
}
.catSelector .cell {
	clear:left;
	border-top:dotted 1px #b9b9b9;
	zoom:1;
	overflow: hidden;
}
.catSelector .first {
	border-top:none;
}
   
 
 
.catSelector .altSel a:visited {
	color:#666;
}
.catSelector .altSel a:hover {
	color:#ff5500;
}
   
 
.catSelector {
	border:solid 1px #CBCBC9;
	border-top:solid 1px #939392;
}
.catSelector h6 {
	float:left;
	width:80px;
	font-size:12px;
	color:#999;
	text-align:right;
	padding-right:10px; 
	display:inline;
	line-height:29px;
	font-weight:normal;
}  
 
.catSelector .altSel .more:hover,.catSelector .altSel .extmore:hover {
	text-decoration:underline;
	color:#ff5500;
}
.catSelector .altSel li { 
	float:left;
	margin-bottom:3px;
	_margin-bottom:5px;
	overflow:hidden;
	line-height:22px;
	height:23px;
	zoom:1;
	overflow:hidden;
	text-overflow:ellipsis;
	width:auto;
	padding:0 15px 0 15px;
}
.catSelector .altSel .tagConn {
	width:905px;
	float:left;
	display:inline;
	margin-top:7px;
}
  
.catSelector .altSel {
	margin:0 0 0 20px;
	display:inline;
	float:left;
	line-height:2;
	width:675px;
	overflow:hidden;
	zoom:1;
	padding:4px 0 2px 0;
	_padding-top:6px;
	text-align:left;
}

.catSelector .altSel a {
    color: #666;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 3px 3px 2px 3px;
    padding: 1px 3px 3px 3px\9;
    zoom: 1;
}

#selectedQual h6 {
    color: #666;
    display: inline;
    float: left;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    font-weight: normal;
    padding-right: 10px;
    text-align: right;
    width: 80px;
    position: relative;
    z-index: 200;
    background-color: #fff;
}

#selectedQual, #wholeCrumb {
    position: relative;
    overflow: hidden;
    z-index: 500;
    height: 36px;
    border: solid 1px #939392;
    border-bottom: none;
    background: #fff;
}

#selectedQual .selQual .selBlock {
    width: 2000px;
    position: relative;
}

#selectedQual .selQual a.sel, #selectedQual .selQual a.cat {
    float: left;
    display: inline;
    padding: 0 15px 0 0;
    line-height: 36px;
    height: 36px;
    background: url(${ctx}/images/ico11.png) no-repeat right -657px;
    color: #c33;
    margin-right: 13px;
    font-size:12px;
}

#selectedQual .selQual a.sel i, #selectedQual .selQual a.cat i {
    color: #999;
    font-style: normal;
}

#selectedQual .selQual a.sel:hover, #selectedQual .selQual a.cat:hover {
    color: #891925;
    background-position: right -694px;
    text-decoration: none;
}

.searchResult .p1 {
    border-bottom: dotted 1px #b2b2b2;
    line-height: 35px;
    color: #333;
    font-size: 12px;
}
 
		<!--end分类样式-->
		
		<!--begin tab style-->
		
		.goodsList {
	clear:left;
}
.goodsList .listHeader {
	height:24px;
	border-bottom:1px solid #d5d5d5;
	border-right:1px solid #d5d5d5;
}
.goodsList .tab a {
	float:left;
	display:inline;
	width:118px;
	height:24px;
	line-height:24px;
	border:none;
	color:#999;
	text-shadow:0 1px #fafafa;
	text-align:center;
	border-right:1px solid #d5d5d5;
}
.goodsList .tab a.cur {
	color:#fff;
	background-color:#999;
	font-size:14px;
	border-bottom:1px solid #999;
	border-right:1px solid #999; 
}
.goodsList .tab a.down {
	background:#999 url(../../images/v4/ordercur.png) no-repeat 80px 6px;
	color:#fff;
}
.goodsList .tab a.up {
	background:#999 url(../../images/v4/ordercur.png) no-repeat 80px -38px;
	color:#fff;
}
.goodsList .addons {
	float:right;
	line-height:24px;
	display:inline;
	margin:0 10px 0 0;
	color:#666;
	font-family:Verdana,Geneva,sans-serif;
}
.goodsList .addons span {
	margin-right:50px;
}
.goodsList .addons a {
	margin-right:10px;
}
.goodsList .listHeader a.next,.goodsList .listHeader a.prev {
	float:right;
	font-family:"simSun";
	line-height:16px;
	height:16px;
	border:solid 1px #999;
	padding:0 6px;
	color:#999;
	display:inline;
	margin-top:2px;
}
.goodsList .listHeader a.font {
	border:1px solid #999;
	color:#999;
	font-weight:normal;
}
.goodsList .listHeader a.next:hover,.goodsList .listHeader a.prev:hover {
	border:1px solid #999;
	text-decoration:none;
}
.goodsList .listHeader a.disabled,.goodsList .listHeader a.disabled:hover {
	border:solid 1px #e6e6e6;
	color:#d7d7d7;
	cursor:default;
	font-weight:bold;
}
		<!--end tab style-->
	 
	 </style>
</head>

<body>
	<tags:topPC/>

    <div class="container"> 
 
 <div style="margin-bottom:15px;"></div>
 <div class="searchResult" style="margin-bottom: 15px;margin-top:15px;display: none;"> 
   		<p class="p1">您搜索的：“<b><strong id="search_key_id">${param.title }</strong></b>”我们为你找到 <b class="totalCount"></b> 件相关商品。</p> 
  	</div>
  	
<div class="cell first" id="selectedQual" style="display: none;">     
	   <h6>您已选择：</h6> 
	   <div class="selQual" style="width: 705px;"> 
	    <div class="selBlock"> 
	    </div> 
	   </div> 
	  </div>   
<div class="catSelector" id="catSelector" > 
	  
	 
   <!-- BEGIN category --> 
   
   
   <div class="cell first" id="cell2"> 
	   <h6>分类：</h6> 
	   <div class="altCate altSel costHeight" >   
	    <!-- list start --> 
	    <ul class="tagConn" id="category_id"> 
	    </ul> 
	    <!-- list end --> 
	   </div> 
  </div>
   <!-- END category --> 
   
    <!-- BEGIN brands --> 
   <div class="cell" id="cell1"> 
	   <h6>品牌：</h6> 
	   <div class="altCate altSel"> 
	    
	    <!-- list start --> 
	    <ul class="tagConn" id="brands_id"> 
	   </ul> 
	   
	    <!-- list end --> 
	   </div> 
  </div>
   
    
   <div class="clearBoth"></div> 
  </div>
		<div style="border-top: 3px solid #999;margin-top:15px;margin-bottom:15px;">
		 <div class="goodsList" id="goodsListfix" style="position: static; top: 405px; border-top-width: 0px; z-index: 2000; width: 1040px; background: rgb(255, 255, 255);"> <div class="listHeader" id="listheader"> <div class="tab">  
		 <a href="#" name="orderby" class="ordby_default cur filter">默认</a> 
		 <a ref="nofollow" href="#" class="ordby_pr filter" data-sort-type="price" data-states="desc" name="orderby">价格</a> 
		 <a ref="nofollow" href="#" class="ordby_sale filter" data-sort-type="sale" data-states="desc" name="orderby">销量</a>
		  <a ref="nofollow" href="#" name="orderby " data-sort-type="date" data-states="desc" class="ordby_new filter">最新</a>
		   </div>
		    <div class="addons"> <!--页码跳转参数--> 
		    <input type="hidden" name="base_url" value="#">
		     <input type="hidden" name="per_page" value="100">
		      <input type="hidden" name="num_pages" value="103"> <!-- END -->
		       <a href="#" class="next">下一页&nbsp;&gt;</a> <a href="javascript:void(0)" class="prev disabled">&lt; </a> 
		       <span>共找到 <b id="goods_count_id"></b> 个商品    <strong class="curpage">1</strong>/<c id="all_page_id"></c>页</span> 
		       </div></div> </div>
		</div>
		 
	    <div class="row" id="goods_new_div">
	    		<!-- col1 -->
			    <div class="col-sm-3 col-md-3" id="col_id0">
					    	
		  		</div>
		  		
		  		<!-- col2 -->
		  		<div class="col-sm-3 col-md-3" id="col_id1">
					    	
		  		</div>
		  		
		  		<!-- col3 -->
		  		<div class="col-sm-3 col-md-3" id="col_id2">
					    	
		  		</div>
		  		
		  		<!-- col4 -->
		  		<div class="col-sm-3 col-md-3" id="col_id3">
					    	
		  		</div>
		  		
    </div>
    
	    
    </div>
    
    <div id="pager"   align="center" style="position: static;"></div>  
    
    <!-- begin model -->
    <div class="thumbnail shopbox" id="goods_new_model" style="display: none;">
     	  <a href="#" class="img-a" target="_blank"><img alt="" src="${ctx }/images/loading.png"></a>
      
      <div class="">
        <a href="#" target="_blank" class="title-a" style="text-decoration: none;"><h6 class="title ellipsis" style="color:#666;"></h6></a>
        <div style="background: #ff5500;color:#FFF;font-size:13px;padding-left:5px;">全国包邮、货到付款</div>
        <p class="content" style="margin:0px;line-height: 30px;">
        	<strong class="nowprice" style="color:#F76120;font-size:20px;font-weight: bold;height: 31px;line-height: 31px;"></strong>
        	<span class="oldprice" style="color:#9F9F9F;font-size:12px;text-decoration:line-through;"></span>
        	<span style="font-size:12px;color:#666;padding-left:5px;">月销量：<span class="buy-num" style="padding-right:5px;"></span></span>
        </p>
      </div>
      
  	</div>
  	<!-- end model -->
  	
	<tags:bottomPC/>
	<script>
		$(function(){
			
			$("#search_form_id").show();	
			var col = 4;  
			 
		 
			//排序类型
			window.sortType = "";
			//升序还是降序
			window.sortStates = "";
			
			//默认分类为不限
			if("${param.category}"){
				window.categoryId = "${param.category}";
			}else{
				window.categoryId = 0;
			}
			
			//默认品牌为不限
			if("${param.brands}"){
				window.brandsId = "${param.brands}";
			}else{
				window.brandsId = 0;
			}
			
			if('${param.title}'){
				window.title = '${param.title}';
				$(".searchResult").show();
				$(".search-input").val(window.title);  
			}else{
				window.title = ""; 
			}
			
			//回调函数  
			var PageClick = function(pageclickednumber) {
				init(pageclickednumber);
				$("html,body").animate({scrollTop:$("#pager").offset().top-1},10);//1000是ms,也可以用slow代替
			};
			
			var init = function(currPage){
				//分页清空数据
				for(var z =0;z<5;z++){
					$("#col_id"+z).html("");
				}
				
				//获取商品信息
				jQuery.ajax({
					type : 'Get',
					contentType : 'application/json',
					url : "${ctx}/goods/goodsListByGrade.do?pageSize=48&currPage="+currPage+"&categoryId="+window.categoryId+"&brandsId="+window.brandsId,
					cache:true,
					async:false,
					data : {
						title:$(".search-input").val(),
						sortType:sortType,
						sortStates:sortStates
					},
					dataType : 'json',
					success:function(dataObj){
						$("#pager").pager({
							pagenumber : currPage,
							pagecount : dataObj.obj.totalPage,
							buttonClickCallback : PageClick
						});
			        	var list = dataObj.obj.goodsList;
			        	$("#goods_count_id,.totalCount").html(dataObj.obj.totalCount);
			        	if(dataObj.obj.totalCount == 0){
			        		$("#goodsListfix .curpage").html(0);
			        		$("#goodsListfix .prev").hide();
			        		$("#goodsListfix .next").hide();
			        	}else{
			        		$("#goodsListfix .curpage").html(1);
			        		$("#goodsListfix .prev").show();
			        		$("#goodsListfix .next").show();
			        	}
			        	$("#all_page_id").html(dataObj.obj.totalPage);
			        	for(var i = 0 ;i<list.length;i++){
			        		var model = $("#goods_new_model").clone();
			        		model.attr("id","");
			        		var goods = list[i];
			        		var price = goods.price;
			            	$("#col_id"+i%col).append(model);
			            	if(goods.picName.indexOf("http") != -1){
			            		model.find("img").attr("data-url",goods.picName).attr("title",goods.title).attr("alt",goods.title);
			            	}else{
			            		model.find("img").attr("data-url","${ctx}/upload/download.do?fileName="+goods.picName).attr("title",goods.title).attr("alt",goods.title);	
			            	}
			            	model.find(".img-a").attr("href","${ctx}/pdetailGoods/"+goods.id);
	            			model.find(".title-a").attr("href","${ctx}/pdetailGoods/"+goods.id);
			            	model.find(".title").html(goods.title);
			            	model.find(".btn").attr("href","${ctx}/pdetailGoods/"+goods.id);
			            	model.find(".buy-num").html(goods.buyNum);
			            	model.find(".nowprice").html("￥"+goods.nowPrice);
			            	model.find(".oldprice").html("￥"+price);
			            	model.show();
			        	}
			        	$(".thumbnail img").scrollLoading();
			        	$("#pagebottom").html($("#pager").clone(true)).find("#pager").removeClass("col-md-3");
					}
				});
			};
			
			if("${param.cur}"){
				init("${param.cur}");
			}else{
				init(1);
			}
			
			
			
			//获取上架分类
			jQuery.ajax({
				type : 'Get',
				contentType : 'application/json',
				url : '${ctx}/category/getAlllAddOn.do',
				cache:true,
				async:false,
				data : {
				},
				dataType : 'json',
				success : function(data) {
					if (data.result) {
						var categoryList = data.obj;
						if(categoryList){
							var html = "";
							for(var i = 0 ;i<categoryList.length;i++){
								var category = categoryList[i];
								if(category)
									var li = '<li> <a data-par="cell2" title="'+category.name+'" name="categoryId" val="'+category.id+'" href="#">'+category.name+'</a> </li>';
									html = html+li;
							}
							$("#category_id").append(html);
						}
						
					} else {
						//alert('数据库异常,查询数据失败');
					}
				},
				error : function(data) {
				}
			});	
			
			//获取上架品牌
			jQuery.ajax({
				type : 'Get',
				contentType : 'application/json',
				url : '${ctx}/brands/getAlllAddOn.do',
				cache:true,
				async:false,
				data : {
				},
				dataType : 'json',
				success : function(data) {
					if (data.result) {
						var brandsList = data.obj;
						if(brandsList){
							var html = "";
							for(var i = 0 ;i<brandsList.length;i++){
								var brands = brandsList[i];
								if(brands)
									var li = '<li> <a data-par="cell1" title="'+brands.name+'" name="brandsId" val="'+brands.id+'" href="#">'+brands.name+'</a> </li>';
									html = html+li;
							}
							$("#brands_id").append(html);
						}
						
					} else {
						//alert('数据库异常,查询数据失败');
					}
				},
				error : function(data) {
				}
			});
			
			$(".tagConn").on("click","li",function(){
				$("#selectedQual").show();
				var cat = $(this).closest(".cell").find("h6").html();
				var ja = $(this).find("a");
				var name = ja.attr("name");
				var val = ja.attr("val");
				window[name] = val;
				var par = ja.data("par"); 
				var title = $(this).find("a").attr("title");
				var h2 = '<h2 style="display:inline;"> <a  data-par="'+par+'" title="'+title+'" name="'+name+'" class="cat" href="#"><i style="font-style: normal;">'+cat+'</i>'+title+'</a> </h2>';
				$(".selBlock").append(h2);
				$(this).closest(".cell").hide();
				init(1);
				return false;	
			});
			
			if(window.categoryId){
				$("#category_id").find("a").each(function(){
					if($(this).attr("val") == window.categoryId){
						$(this).trigger("click");
						return false;
					}
				});
			}
			
			$(".selBlock").on("click",".cat",function(){
				$(this).closest("h2").remove();
				var par = $(this).data("par");
				$("#"+par).show();
				var size = $(".selBlock").find("h2").size();
				if(size == 0){
					$("#selectedQual").hide();
				} 
				var name = $(this).attr("name");
				window[name] = 0;
				init(1);
				return false;
			});
			
			   
			
			//绑定搜索按钮
			$(".wg_btn_search").click(function(){
				window.categoryId = 0;
				window.brandsId = 0;
				if($(".search-input").val()){
					$("#search_key_id").html($(".search-input").val());
					$(".searchResult").show();
				}else{
					$(".searchResult").hide();
				}  
				init(1);
			});
			
			//绑定搜索回车事件
			 $(".search-input").bind('keypress',function(event){
		            if(event.keyCode == "13")    
		            {
		            	$(".wg_btn_search").trigger("click");
		            	return false;
		            }
			 });
			
			//绑定排序事件
			$("#goodsListfix").on("click",".filter",function(){
				window.sortType = $(this).data("sortType");
				window.sortStates = $(this).data("states");
				$("#goodsListfix").find(".cur").removeClass("cur");
				$(this).addClass("cur");
				init(1);
				//改变排序状态
				if(window.sortStates == "desc"){
					$(this).data("states","asc");
				}else{
					$(this).data("states","desc");
				}
				return false;
			});
			
			$("#listheader .next").click(function(){
				if($(this).hasClass("disabled")){
					return false;
				}
				var curPage = $("#listheader .curpage").html();
				curPage = parseInt(curPage)+1;
				var totalPage = $("#all_page_id").html();
				init(curPage);
				$("#listheader .curpage").html(curPage);
				if(curPage>1){
					$("#listheader .prev").removeClass("disabled");
				}else{
					$("#listheader .prev").addClass("disabled");
				}
				
				if(curPage >= totalPage){
					$(this).addClass("disabled");
				}
				
				return false;
			});
			
			$("#listheader .prev").click(function(){
				if($(this).hasClass("disabled")){
					return false;
				}
				var curPage = $("#listheader .curpage").html();
				curPage = parseInt(curPage)-1;
				var totalPage = $("#all_page_id").html(); 
				init(curPage);
				$("#listheader .curpage").html(curPage);
				if(curPage>1){
					$("#listheader .prev").removeClass("disabled");
				}else{
					$("#listheader .prev").addClass("disabled");
				}
				
				if(curPage < totalPage){
					$("#listheader .next").removeClass("disabled");
				}
				return false;
			});
				
				 
		});
	</script>
	
</body>